<template>
    <view class="container" :style="[backgroundCss]">
        <view class="titleContainer" :style="[titleCss]">
            活动参与情况
        </view>
        <view class="contentContainer" :style="[contentCss]">
            <view class="textWrapper">
                <template class="" v-for="(item,index) in titleList">
                    {{item[0]}}
                    <text class="num" :key="index">{{item[1]}}</text>
                </template>
            </view>
            <view class="list">
                <view v-for="(item, index) in detailobj.members" class="item" :key="index">
                    <image class="icon" :src="item.avatar" mode=""></image>
                    <view class="name  text-1line-ellipsis">
                        {{item.nickname}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    var rate = 1;

    export default {
        props: ['data', 'detailobj'],
        data() {
            return {
                //===配置参数
                backgroundCss: {},
                titleCss: {},
                contentCss: {},
                titleList: [],
  
            }
        },
        watch: {
            data: {
                handler(newVal) {
                    this.changeParamToPx()
                },
                deep: true,
                immediate: true,
            },
            detailobj: {
                handler: function observer(val) {
                    console.log("data:", val)
                    this.setAwardList();
                },
                deep: true,
                immediate: true,
            }
        },

        mounted() {

        },
        methods: {
            changeParamToPx() {
                for (var key in this.data.options) {
                    var css = this.data.options[key]
                    var obj = {}
                    if (css.width) {
                        obj.width = css.width * rate + 'rpx'
                    }
                    if (css.height) {
                        obj.height = css.height * rate + 'rpx'
                    }
                    if (css.top) {
                        obj.top = css.top * rate + 'rpx'
                    }
                    if (css.left) {
                        obj.left = css.left * rate + 'rpx'
                    }
                    if (css.image) {
                        obj['background-image'] = 'url(' + css.image + ')'
                    }
                    if (key == "background") {
                        this.backgroundCss = obj;
                    }
                    if (key == "title") {
                        this.titleCss = obj;
                    }
                    if (key == "main") {
                        this.contentCss = obj;
                    }
                }
            },
            
            setAwardList(){
                var title=  this.detailobj.joinData.desc
                
                var tab = [
                    {id: -1, type: 'cyrs'},
                    {id: -1, type: 'llcs'},
                    {id: -1, type: 'spsm'},
                    {id: -1, type: 'lplq'},
                    {id: -1, type: 'fxcs'},
                ]
                this.titleList.splice(0, this.titleList.length); 
                for (var i in tab){                 
                    tab[i].id = title.indexOf('['+ tab[i].type + ']')
                }
                tab.sort(function(a, b){
                    return a.id - b.id
                })         
                console.log(tab)
                for (var i  in tab){
                    // var reg=new RegExp( '\['+ tab[i].type +  "\]");
                    var reg = '['+ tab[i].type +  "]"
                    var pushList = ['','','']
                    if (tab[i].id>=0){
                        var obj = [] 
                        obj = title.split(reg)
                        // console.log("obj:",obj,reg)
                        if (obj.length == 2){
                            title = obj[1]                           
                            pushList[0] = obj[0]
                            pushList[1] = this.detailobj.joinData[tab[i].type]
                            this.titleList.push(pushList);
                        }
                    }
                }
                var pushList = ['','','']
                pushList[0] = title
                pushList[1] = ""
                this.titleList.push(pushList);
                
                console.log(this.titleList)            
            }           
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 750rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 750rpx;
        height: 580rpx;
        background-color: #ffe6e6;
        position: relative;
        background-size: 100% 100%;
        overflow: hidden;
        .titleContainer{
            font-size: 36rpx;
            color: #fff9ef;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            z-index: 10;
            background-size: 100% 100%;
        }
        .contentContainer{
            width: 714rpx;
            height: 511rpx;
            background-color: #ffffff;
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            left: 18rpx;
            background-size: 100% 100%;
             z-index: 6;
            .textWrapper{
                width: 620rpx;
                height: 92rpx;
                font-size: 28rpx;
                font-weight: normal;
                font-stretch: normal;
                line-height: 46rpx;
                letter-spacing: 0rpx;
                color: #545454;
                margin-top: 70rpx;
                margin-bottom: 15rpx;
                text-align: center;
                .num{
                    color: #f83930;
                }
            }
            .list{
                display: flex;
                flex-wrap: wrap;
                width: 714rpx;
                margin-bottom: 30rpx;
                .item{
                    font-size: 28rpx;
                    line-height: 46rpx;
                    color: #333333;
                    margin-top: 30rpx;
                    margin-left: 50rpx;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    
                    .icon{
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                    }
                    .name{
                        width: 80rpx;
                    }
                }
            }
            
        }
        
    }
</style>
